Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move SmartCopy to Chrome Manifest V3 #112

Open
wants to merge 9 commits into
base: master
Choose a base branch
from

Conversation

GuyKh
Copy link
Collaborator

@GuyKh GuyKh commented Mar 11, 2024

Trying to tackle #111 , so far no luck

@GuyKh
Copy link
Collaborator Author

GuyKh commented May 12, 2024

An example for scraping a webpage by Gemini:

Recipe Clipper Chrome Extension (Example)

This is a basic example of a Chrome extension that parses a webpage to extract a recipe.

Functionality:

  • When you visit a recipe webpage and click the extension icon, it extracts the title, ingredients, and instructions.
  • It then displays this information in a popup window.

Components:

  • manifest.json: This file defines the extension's metadata like name, description, and what kind of pages it works on (in this case, all webpages).
  • content.js: This script runs on the webpage and interacts with the HTML content.

Here's a simplified breakdown of the files:

manifest.json:

{
  "manifest_version": 3,
  "name": "Recipe Clipper",
  "version": "1.0",
  "description": "Clips recipes from webpages",
  "permissions": ["activeTab"],
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }],
  "action": {
    "default_popup": "popup.html"
  }
}

content.js:

chrome.action.onClicked.addListener(function(tab) {
  // Get elements from the webpage
  var title = document.querySelector("h1.recipe-title").innerText;
  var ingredients = document.querySelectorAll("ul.ingredients li");
  var instructions = document.querySelector("div.instructions").innerText;

  // Process the data (can be improved for better extraction)
  var ingredientList = "";
  for (var i = 0; i < ingredients.length; i++) {
    ingredientList += ingredients[i].innerText + "\n";
  }

  // Create the recipe data object
  var recipe = {
    title: title,
    ingredients: ingredientList,
    instructions: instructions
  };

  // Send the recipe data to the popup script
  chrome.tabs.sendMessage(tab.id, recipe);
});

popup.html: (This is just an example structure for the popup window)

<!DOCTYPE html>
<html>
<head>
  <title>Recipe Clipper</title>
</head>
<body>
  <h1>Recipe</h1>
  <p id="recipe-title"></p>
  <h2>Ingredients</h2>
  <ul id="ingredients-list"></ul>
  <h2>Instructions</h2>
  <p id="instructions"></p>
  <script src="popup.js"></script>
</body>
</html>

popup.js: (This script receives data from content.js and populates the popup window)

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  chrome.tabs.sendMessage(tabs[0].id, function(response) {
    document.getElementById("recipe-title").innerText = response.title;
    document.getElementById("ingredients-list").innerText = response.ingredients;
    document.getElementById("instructions").innerText = response.instructions;
  });
});

Please note: This is a very basic example and has limitations. Real-world recipe parsing would require more sophisticated techniques to handle variations in HTML structure across recipe websites.

Remember, building Chrome extensions requires some coding knowledge. There are tutorials available online to get you started with Chrome extension development https://developer.chrome.com/docs/extensions/get-started. You can also find existing recipe clipper extensions on the Chrome Web Store for inspiration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant